<template>
  <h2>当前求和为:{{sum}}</h2>
  <button @click="sum++">点我x+1</button>
  <hr>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>展示薪水:{{job.j1.salery}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salery++">涨薪</button>
</template>

<script>
//TODO readonly是深度只读(数据没有改变)   shallowReadonly是浅只读(浅层次的只读,深层次的话可以修改,比如:salery---------使用的时候加上)   ref同理
import {toRefs, reactive, ref,shallowReadonly} from "vue";

export default {
  name: 'Demo',
  setup() {
    //数据
    let sum = ref(0)
      let person = reactive({
      name: '张三',
      age: 18,
      job:{
        j1:{
          salery:20
        }
      }
    })
//此时person就被保护了
person = shallowReadonly(person)
    return{
      sum,
      ...toRefs(person)
    }
  }
}
</script>

<style>
</style>
